<template>
  <div class="slide-captcha">
    <div
      class="range"
      :class="rangeStatus ? 'success' : ''"
    >
      <div class="background"></div>
      <i
        @mousedown="rangeMove"
        @touchstart.stop="handleTouchStart"
        :class="rangeStatus ? successIcon : startIcon"
      ></i>
      <span :class="rangeStatus ? 'success' : ''">{{
        rangeStatus ? successTips : tips
      }}</span>
    </div>
    <div style="width: 3px; height: 1px"></div>
  </div>
</template>

<script>
let leftBox

export default {
  name: 'SlideCaptcha',
  props: {
    // 成功之后的函数
    onSuccess: {
      type: Function
    },
    // 失败之后的函数
    onFailure: {
      type: Function
    },
    // 开始的图标
    startIcon: {
      type: String,
      default: 'el-icon-d-arrow-right'
    },
    // 成功图标
    successIcon: {
      type: String,
      default: 'el-icon-success'
    },
    // 成功文字
    successTips: {
      type: String,
      default: '验证成功'
    },
    // 开始的文字
    tips: {
      type: String,
      default: '请拖住滑块，拖动到最右边'
    },
    // 或者用值来进行监听
    status: {
      type: String
    }
  },
  data() {
    return {
      disX: 0,
      rangeStatus: false
    }
  },
  mounted() {
    leftBox =
      document.getElementsByClassName('background')[0]
  },
  methods: {
    // 滑块移动
    rangeMove(e) {
      const ele = e.target
      const startX = e.clientX
      const eleWidth = ele.offsetWidth
      const parentWidth = ele.parentElement.offsetWidth
      const MaxX = parentWidth - eleWidth
      // const leftBox =
      //   document.getElementsByClassName('background')[0]
      if (this.rangeStatus) {
        // 不运行
        return false
      }
      document.onmousemove = (e) => {
        const endX = e.clientX
        this.disX = endX - startX
        if (this.disX <= 0) {
          this.disX = 0
        }
        if (this.disX >= MaxX - eleWidth) {
          // 减去滑块的宽度,体验效果更好
          this.disX = MaxX
        }
        ele.style.transition = '.1s all'
        ele.style.transform =
          'translateX(' + this.disX + 'px)'
        e.preventDefault()
      }
      document.onmouseup = () => {
        leftBox.style.width = 0 + 'px'
        leftBox.style.transition = '.5s all'
        if (this.disX !== MaxX) {
          ele.style.transition = '.5s all'
          ele.style.transform = 'translateX(0)'
          // 失败
          this.onFailure && this.onFailure()
        } else {
          this.rangeStatus = true
          if (this.status) {
            this.$parent[this.status] = true
          }
          // 成功
          this.onSuccess && this.onSuccess()
        }
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    handleTouchStart(e) {
      console.log('touch start', e)
      const ele = e.target
      const touch = e.touches[0]
      const startX = touch.clientX
      const eleWidth = ele.offsetWidth
      const parentWidth = ele.parentElement.offsetWidth
      const MaxX = parentWidth - eleWidth
      // const leftBox =
      //   document.getElementsByClassName('background')[0]
      if (this.rangeStatus) {
        // 不运行
        return false
      }
      document.ontouchmove = (e) => {
        const touch = e.touches[0]
        const endX = touch.clientX
        this.disX = endX - startX
        if (this.disX <= 0) {
          this.disX = 0
        }
        if (this.disX >= MaxX - eleWidth) {
          // 减去滑块的宽度,体验效果更好
          this.disX = MaxX
        }
        ele.style.transition = '.1s all'
        ele.style.transform =
          'translateX(' + this.disX + 'px)'
      }
      document.ontouchend = () => {
        leftBox.style.width = 0 + 'px'
        leftBox.style.transition = '.5s all'
        if (this.disX !== MaxX) {
          ele.style.transition = '.5s all'
          ele.style.transform = 'translateX(0)'
          // 失败
          this.onFailure && this.onFailure()
        } else {
          this.rangeStatus = true
          if (this.status) {
            this.$parent[this.status] = true
          }
          // 成功
          this.onSuccess && this.onSuccess()
        }
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-captcha {
  .range {
    background-color: #e9e9e9;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #585858;
    @include flex-center;
    height: 46px;
    border-radius: 4px;
    &.success {
      background-color: #7bc23cbe;
      color: #fff;
      i {
        color: #4092ff;
      }
    }
    i {
      position: absolute;
      left: 0;
      width: 40px; /*no*/
      height: 40px;
      color: #b5b5b5;
      background-color: #fff;
      border: 1px solid #d8d8d8;
      cursor: pointer;
      font-size: 16px;
      @include flex-center;
    }

    .background {
      width: 0;
      height: 100%;
      background-color: #4092ff;
      position: absolute;
      left: 0;
    }

    span {
      font-size: 14px;
      font-family: 'PingFang SC';
      color: #b4b4b4;

      &.success {
        color: white;
      }
    }
  }
}
</style>
